{include file="header.tpl"}
<div id="page">
			<div id="header">
				<a href="#menu-left"></a>
				{$title} - CountSheep
				<a href="#menu-right" class="friends right"></a>
			</div>
			<div id="banner" style="position:relative;display:{$boolean}">
			     <a href="{$banner.id}" class="showArticle"><img src="{$banner.image}" /></a>
				 <div id="slider"><span>{$banner.title}</span></div>
			</div>
			<div id="content">
			    
				{section name=s loop=$per}
				<div class="block">
				    <div class="left"><a href="{$per[s].id}" class="showArticle"><img src="{$per[s].image}" width="100" height="79" /></a></div>
					<div class="right">
					  <p class="title"><a href="{$per[s].id}" class="showArticle">{$per[s].title}</a></p>
					 <span style="font-size:13px">{$per[s].content}<span>
					  <p class="remark"><span class="catalog"># {$per[s].cname} #</span><span class="date">{$per[s].addDate}</span></p>
					</div>
				</div>
                {/section}
			</div>

			<form method="get" action="article.php" id="form1">
                 <input type="hidden" name="id" id="aid" />
            </form>
			<nav id="menu-left">
				<ul>
					<li><a href="index.php">首页</a></li>
					<li><a href="web.php?cid=1">HTML / HTML5</a></li>
					<li><a href="web.php?cid=2">CSS （层叠样式表）</a></li>
					<li><a href="web.php?cid=3">JavaScript / jQuery</a></li>
					<li><a href="web.php?cid=4">随笔</a></li>
					<li><a href="web.php?cid=5">转载</a></li>
					<li><a href="web.php?cid=6">笑话集</a></li>
					<li><a href="message.php">留言板</a></li>
					<li><a href="about.php">关于博主</a></li>
				</ul>
			</nav>
			<nav id="menu-right">
				<ul align="center">
					<h2 style="color:#fff;font:bold 18px/25px '微软雅黑';">管理员登录</h2>
							<form id="login">
							<li class="Label">用户名</li>
							<li><input type="text" name="username" id="username" style="width:100%;height:30px;text-align:center;" /></li>

							<li class="Label">密码</li>
							<li><input type="password" name="password" id="password" style="width:100%;height:30px;text-align:center;" /></li>
                            <li>&nbsp;</li>
                            <li><input type="submit" value="登录" name="submit" style="width:100%;height:35px;text-align:center;" /></li>
							</form>				
				</ul>
				<div id="head"></div>
			</nav>
		</div>
<script type="text/javascript">
			//	The menu on the left
			$(function() {
				$('nav#menu-left').mmenu({
					searchfield: false,
					counters: true
				});
			});
			//	The menu on the right
			$(function() {

				$('nav#menu-right').mmenu({
					position: 'right',
					counters: false,
					searchfield: false
				});

				//	Click a menu-item
				var $confirm = $('#confirmation');
				$('#menu-right a').not( '.mmenu-subopen' ).not( '.mmenu-subclose' ).bind(
					'click.example',
					function( e )
					{
						e.preventDefault();
						$confirm.show().text( 'You clicked "' + $(this).text() + '"' );
						$('#menu-right').trigger( 'close' );
					}
				);
			});

          //首页文章摘要
          /*
          var $summary = $('#content .right p.summary').text().substring(0,32);
		  $('#content .right p.summary').text($summary+'...');
          */
          //管理员登录
          $('input[name=submit]').bind('click',function(){
				 if($('#username').val() === '' || $('#password').val() === ''){
				        alert('用户名不得为空');
				 }else{
				     $.ajax({
                           url: 'admin/login.php',
                           type: 'POST',
						   data: $('#login').serialize(),
                           success:function(data){
						        if(data){
								    alert('登陆成功');
                                    window.location.href = 'admin/func.php';
						        }else{
						            alert('用户名或密码错误');
						        }
						}
						});				 
		          };
				  return false;
		  });

          //点击查看文章内容
          $('.showArticle').bind('click',function(){
				var $id = $(this).attr('href');
				$('#aid').val($id);
				$('#form1').submit();
                return false;
		  });
		  
		  //左侧菜单默认选中
		  $('#menu-left ul li:contains({$title})').addClass('Selected');

		  //banner图片长宽自适应
		  $(function(){
                var bannerWidth = $(window).width();
				if(bannerWidth < 540){
                        $('#banner img').css({
				        	'width':bannerWidth + 'px',
					        'height':bannerWidth * (5/9) + 'px'
					    });
				}else{
				         $('#banner img').css({
					        'width':'540px',
					        'height':'300px'
					     });
				}
				
		  })
</script>
{include file="footer.tpl"}
